<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单控件绑定</title>
	<link rel="icon" href="../logo.png">
	<link rel="stylesheet" href="../style.css">
	<script src="../vue.js"></script>
	<style>
		.active{
			width: 100px;
			height: 100px;
			border:1px solid red;
		}
		.text-center{
			text-align: center;
		}
		.bold{
			font-weight: bolder;
		}
	</style>
</head>
<body>
	<p class="title">1.基础用法</p>
	<div class="subtitle">1.3复选框</div>
	<div id="example1">
		<input type="checkbox" id="checkbox" v-model="checked">  
		<label for="checkbox">{{checked}}</label>
	</div>

	<script>
		var app1=new Vue({
			el:'#example1',
			data:{
				checked:false
			},
		})
	</script>
	
	<div id="example2">
		<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
		<label for="jack">Jack</label>
		<input type="checkbox" id="jack" value="john" v-model="checkedNames">
		<label for="john">john</label>
		<input type="checkbox" id="jack" value="Mike" v-model="checkedNames">
		<label for="Mike">Mike</label>
		<br>
		<span>Checked Name: {{checkedNames}}</span>
	</div>

	<script>
		var app2 = new Vue({
			el:'#example2',
			data:{
				checkedNames:[]
			}
		})
	</script>
	<p class="subtitle">单选按钮</p>

	<div id="example3">
		<input type="radio" id="one" value="one" v-model="picked">
		<label for="one">One</label>
		<br>
		<input type="radio" id="two" value="two" v-model="picked">
		<label for="two">Two</label>
		<span>Picked:{{picked}}</span>
	</div>
	<script>
		var app3 = new Vue({
			el:'#example3',
			data:{
				picked:'one'
			}
		})
	</script>

	<p class="subtitle">选择列表</p>
	<div id="example4">
		<small>单选</small>
		<select v-model="selected">
			<option>A</option>
			<option>B</option>
			<option>C</option>
		</select>
		<span>Selected:{{selected}}</span>

		<small>多选</small>
		<select v-model="multipleSelected" multiple>
			<option>A</option>
			<option>B</option>
			<option>C</option>
		</select>
		<span>Selected:{{multipleSelected}}</span>

		<select v-model="select">
			<option v-for="option in options" v-bind:value="option.value">
				{{option.text}}
			</option>
		</select>
		<span>select:{{select}}</span>
	</div>

	<script>
		var app4 = new Vue({
			el:'#example4',
			data:{
				selected:null,
				multipleSelected:[],
				select:'A',
				options:[
					{text:'A',value:'A'},
					{text:'B',value:'B'},
					{text:'C',value:'C'},
				]
			}
		})
	</script>

	
</body>
</html>